<template>
   <div>
      <div class="headerNav">
         <div class="header-logo">
            <img src="http://101.42.51.171:9000/smart/image/logo.png" alt="">
         </div>
         <div class="header-search">
            <img src="../../assets/image/maintitle.png" alt="" style="padding-left: 50px;width: 356px;">
         </div>
         <div class="header-right">
            <el-link :icon="Avatar" @click="gotoManager">我的</el-link>
            <el-link target="_blank" @click="gotoLogin">请登录/注册</el-link>
            <el-link>
               <el-dropdown>
                  <span class="el-dropdown-link">
                     我的订单
                     <el-icon class="el-icon--right">
                        <arrow-down />
                     </el-icon>
                  </span>

                  <template #dropdown>
                     <el-dropdown-menu>
                        <el-dropdown-item v-for="v in Myorder" :key="v.id" @click="toOrder(v.title, v.Type)">
                           {{ v.title }}
                        </el-dropdown-item>
                     </el-dropdown-menu>
                  </template>

               </el-dropdown>
            </el-link>
         </div>
      </div>
   </div>
</template>

<script lang="ts" setup>
import { Search, Avatar } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from "vue-router";
import { useUserStore } from "../../store/UserStore.js";
import { storeToRefs } from "pinia";
import { ElMessage } from 'element-plus'
let router = useRouter();
let Myorder = ref([
   { id: 1, title: '酒店订单', Type: 5 },
   { id: 2, title: '火车票订单', Type: 2 },
   { id: 3, title: '飞机票订单', Type: 1 },
   { id: 4, title: '旅行订单', Type: 6 },
   { id: 5, title: '全部车票订单', Type: 7 }
])

// 我的和登录注册的跳转
//Pinia 存储Login_state，判断当前登录状态，是否登录
const UserStore = useUserStore();
// 登录/注册的跳转
const gotoLogin = () => {
   setTimeout(function () {
      router.push("/login")
   }, 500)
}
//我的信息的跳转
let gotoManager = () => {
   if (sessionStorage.length != 0 && UserStore.useremail !== null) {
      setTimeout(function () {
         router.push("/manager")
      }, 500)
   } else {
      ElMessage({
         showClose: true,
         message: '您还未登录，正在跳转登录页面...',
         type: 'error',
      })
      const message = document.querySelector('.el-message__content')?.parentNode
      //判断提示框的数量   
      if (document.getElementsByClassName('el-message__content').length > 1) {
         setTimeout(function () {
            message.parentNode.removeChild(message);
         }, 100)
      }
      setTimeout(function () {
         router.push("/login")
      }, 500)
   }
}
//搜索框键入
const input = ref('')

//我的订单页面跳转
const toOrder = (title: any, Type: number) => {
   if (sessionStorage.length != 0 && UserStore.useremail !== null) {
      console.log(Type);

      setTimeout(function () {
         router.push({
            path: '/myorder',
            query: {
               title: title,
               type: Type
            }
         })
      }, 500)
   } else {
      ElMessage({
         showClose: true,
         message: '您还未登录，正在跳转登录页面...',
         type: 'error',
      })
      const message = document.querySelector('.el-message__content')?.parentNode
      //判断提示框的数量   
      if (document.getElementsByClassName('el-message__content').length > 1) {
         setTimeout(function () {
            message.parentNode.removeChild(message);
         }, 100)
      }
      setTimeout(function () {
         router.push("/login")
      }, 500)
   }
}
</script>

<style lang='scss'>
.el-header {
   min-width: 1280px;
}

.header-right {
   width: 380px;
}

.headerNav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 70px;
   width: 1288px;
   position: fixed;
   top: 0%;
   background-color: #fff;
   z-index: 999;
   padding: 10px 0;
}

.headerNav img {
   width: 100%;
   height: 60px;
}

.el-input-group__append {
   background-color: #409eff;
   color: #fff;
}

.header-search {
   width: 700px;
   ;
   margin: 0 2rem;
}

.el-input-group {
   max-width: 700px !important
}

.el-link {
   margin: 0 25px;
}

/* 伪类选择器：可以用来选取获得焦点的元素
当鼠标移入上去后取消黑色边框 */
.el-dropdown-link:focus {
   outline: none;
}
</style>